<template>

  <div style="width: 800px;margin-left: 10%;margin-top: 20px">
    <!--饼状图-->
    <div class="second">
      <ul>
        <li>
          <el-card class="box-card" style="background-color:RGB(237,238,255);">
            <div>
              <span>员工在职状态分布</span>
            </div>
            <div>
              <div id="myChart" style="width:100%;height:200px;float:left;"></div>
            </div>
          </el-card>
        </li>
        <li>
          <el-card class="box-card" style="background-color:RGB(255,239,247);">
            <div>
              <h5>部门人数分布</h5>
            </div>
            <div>
              <div id="dept" style="width:100%;height:200px;float:left;"></div>
            </div>
          </el-card>
        </li>
        <li>
          <el-card class="box-card" style="background-color:RGB(255,244,238);">
            <div>
              <h5>员工年龄分布</h5>
            </div>
            <div>
              <div id="age" style="width:100%;height:200px;float:left;"></div>
            </div>
          </el-card>
        </li>
      </ul>
    </div>
    <!--跑马图,日历-->
    <div class="third">
      <ul>
        <li style="width: 400px;">
          <template>
            <el-card class="box-card" style="height: 350px">
              <div>
                <span class="demonstration">新员工</span>
              </div>
            <div style="text-align: center" class="block">
              <el-carousel height="250px">
                <el-carousel-item v-for="item in imgData" :key="imgData.id">
                  <img style="width: 70%;height: 90%;margin-top: 40px"
                       :src="empHeaderImgUrl+item.avatar">
                  <div style="float: left;margin-top: 20px">
                    <h5 style="text-align: left;">工号:{{item.empCode}}</h5>
                    <h5 style="text-align: left;">姓名:{{item.empName}}</h5>
                    <h5 style="text-align: left;">部门:{{item.dept.dname}}</h5>
                    <h5 style="text-align: left;">职位:{{item.position.pname}}</h5>
                  </div>

                </el-carousel-item>
              </el-carousel>
            </div>
            </el-card>
          </template>
        </li>
        <li style="margin-left: 90px">
          <el-calendar class="test" v-model="value" style="width: 480px;height: 350px">
          </el-calendar>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Welcome",
  data() {
    return {
      age: '',
      dept: '',
      imgData:[],
      myChart: '',
      value: new Date(),
      empHeaderImgUrl: this.$HRMSImageUrl,
      opinionData2: [
        // {value:12, name: '正式员工'},
        // {value:12 , name: '试用期'},
        // {value:12, name: '实习期'},
        // {value:12 , name: '服务派遣'}
      ],
      deptData: [
        // {value: 15, name: '管理中心', itemStyle: 'red'},
        // {value: 30, name: '技术中心', itemStyle: '#1FC48D'},
        // {value: 18, name: '运营中心', itemStyle: '#6DC8EC'},
        // {value: 23, name: '客服中心', itemStyle: '#3F8FFF'}
      ],
      ageData: [
        // {value: 15, name: '20-30', itemStyle: 'red'},
        // {value: 30, name: '30-35', itemStyle: '#1FC48D'},
        // {value: 18, name: '35-40', itemStyle: '#6DC8EC'},
        // {value: 23, name: '40以上', itemStyle: '#3F8FFF'}
      ],
    }
  },
  methods: {
    initAgeData() {
      let url = this.$HRMSUrl + "employee/initAgeData";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {

          let age = res.data.data
          let name = Object.keys(age)
          let value = []
          name.forEach(item => {
            value.push(age[item])
          })
          for (let i = 0; i < name.length; i++) {
            this.ageData.push({value: value[i], name: name[i]})
          }
          this.age = this.$echarts.init(document.getElementById('age')).setOption({
            tooltip: {
              trigger: 'item'//放大显示文本
            },
            series: [
              {
                name: '年龄分布',
                type: 'pie',
                radius: '50%',
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  color: function (params) {
                    let colorList = ['red', '#1FC48D', '#6DC8EC', '#3F8FFF']
                    return colorList[params.dataIndex]
                  }
                },
                data: this.ageData
              }
            ]
          })

        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    initDeptData() {
      let url = this.$HRMSUrl + "employee/initDeptData";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          let dept = res.data.data
          let name = Object.keys(dept)
          let value = []
          name.forEach(item => {
            value.push(dept[item])
          })
          for (let i = 0; i < name.length; i++) {
            this.deptData.push({value: value[i], name: name[i]})
          }

          this.dept = this.$echarts.init(document.getElementById('dept')).setOption({
            tooltip: {
              trigger: 'item'//放大显示文本
            },
            series: [
              {
                name: '部门人数分布',
                type: 'pie',
                radius: '50%',
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  color: function (params) {
                    let colorList = ['red', '#1FC48D', '#6DC8EC', '#3F8FFF']
                    return colorList[params.dataIndex]
                  }
                },
                data: this.deptData
              }
            ]
          })

        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    initJobStatusData() {
      let url = this.$HRMSUrl + "employee/initJobStatusData";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          let user = res.data.data
          let name = Object.keys(user)
          let value = []
          name.forEach(item => {
            value.push(user[item])
          })
          for (let i = 0; i < name.length; i++) {
            this.opinionData2.push({value: value[i], name: name[i]})
          }
          this.myChart = this.$echarts.init(document.getElementById('myChart')).setOption({
            // title: {
            //   // text: '员工在职状态分布', // 主标题
            //   // subtext: '', // 副标题
            //   left: 'center' // 左居中
            // },
            tooltip: {
              trigger: 'item'//放大显示文本
            },
            // grid: { containLabel: true },
            // tooltip: {
            //   trigger: 'item',
            //   formatter: '{a} <br/>{b} : {d}%'
            // },
            // color: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
            // color: ['red', '#1FC48D', '#6DC8EC', '#3F8FFF'],
            // backgroundColor: '#ffffff',

            //右下角显示的文字
            // legend: {
            //   orient: 'vertical',
            //   icon: 'circle',
            //   align: 'left',
            //   x: 'right',
            //   y: 'bottom',
            //   data: ['校园暴力行为', '正常行为', '睡觉行为', '玩手机行为']
            // },
            series: [
              {
                name: '在职状态',
                type: 'pie',
                // radius: ['50%', '70%'],空心元
                radius: '50%',
                // avoidLabelOverlap: false,
                // center: ['40%', '50%'],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  color: function (params) {
                    // 自定义颜色
                    let colorList = ['red', '#1FC48D', '#6DC8EC', '#3F8FFF']
                    return colorList[params.dataIndex]
                  }
                },
                data: this.opinionData2
              }
            ]
          })
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    initImgData(){
      let url = this.$HRMSUrl + "/employee/initImgData"
      this.$axios.get(url).then(res => {
        if (res.data.code === 200) {
          this.imgData = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
  },
  created() {
    this.initImgData();
    this.initAgeData();
    this.initDeptData();
    this.initJobStatusData();
  },

}
</script>

<style scoped>

.test /deep/  .el-calendar-table .el-calendar-day{
  width: 60px;
  height: 37px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.second {
  width: 1000px;
  height: 200px;
  margin: 0px auto;
}

.third {
  width: 1000px;
  height: 300px;
  margin-top: 60px;
  margin-left: 0px;
}

.second ul li {
  float: left;
  width: 300px;
  margin-left: 30px;
}

.third ul li {
  float: left;
  width: 300px;
  margin-left: 30px;
}

</style>